<template>
	<view class="wp">
		<view class="status">{{info.status}}</view>
		<view class="shop">
			<view class="list_item" v-for="item in info.goods" :key="item.goodsid">
				<image :src="item.thumb" mode=""></image>
				<view class="info">
					<view class="title clamp">{{item.title}}</view>
					<view v-if="item.optiontitle!=''">规格：{{item.optiontitle}}</view>
					<view>数量：{{item.total}}</view>
					<view>单件售价：{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="list_item">
				<view class="title">订单编号:</view>
				<view class="content">
					<text>{{info.order.ordersn}}</text>
					<button size="mini" @click="copyTap(info.order.ordersn)">复制</button>
				</view>
			</view>
			<view class="list_item">
				<view class="title">售价合计:</view>
				<view class="content">
					<text>{{info.order.goodsprice}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">支付身份:</view>
				<view class="content">
					<text>{{info.isvip}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">享受折扣:</view>
				<view class="content">
					<text>{{info.vipdiscount}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">优惠金额:</view>
				<view class="content">
					<text>-{{info.vipdiscountprice}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">实付金额:</view>
				<view class="content">
					<text class="text_color">{{info.order.price}}</text>
				</view>
			</view>
			<view class="list_item">
				<view class="title">付款时间:</view>
				<view class="content">
					<text>{{info.order.createtime}}</text>
				</view>
			</view>
		</view>
		<view class="buttons">
			<button size="mini" @click="kefu">联系客服</button>
			<button size="mini" v-if="info.order.status=='0'" @click="remove">取消订单</button>
			<button class="text_color" v-if="info.order.status=='0'&&info.order.paytype!=3" size="mini"
				@click="$navTo('/pages/money/pay?orderid=' + info.order.id)">付款</button>
			<button size="mini" v-if="info.order.status=='2'" @click="goodstap">确认收货</button>
			<button size="mini" v-if="info.order.canrefund"
				@click="tiao">{{info.order.refund_button}}</button>
			<button size="mini" v-if="info.order.status=='3' && info.order.iscomment==0"
				@click="$navTo('../order/evaluate?id='+id)">评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {
					isvip: '',
					order: {
						ordersn: '',
						goodsprice: '',
						createtime: '',
						status: '',
						paytype: 3,
						canrefund: '',
						refund_button: '',
						refundtype: -10,
						iscomment: -10
					},
					status: '',
					goods: [],
					vipdiscount: '',
					vipdiscountprice: 0,
				},
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('Detail/main', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			remove: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消订单',
					success: function(res) {
						if (res.confirm) {
							that.$axios('Op/cancel', "POST", 'order', {
								orderid: that.id
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg('订单已取消');
									setTimeout(() => {
										that.$navRed('/pages/order/detailsx?id=' + that
											.id);
									}, 700)
								}
							})
						}
					}
				});
			},
			goodstap() {
				this.$axios('op/complete', "POST", 'order', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('已确认收货');
						setTimeout(() => {
							this.$navRed('/pages/order/detailsx?id=' + this
								.id);
						}, 700)
					}
				})
			},
			tiao() {
				var _this = this;
				if (this.info.order.refundtype == 0) {
					uni.navigateTo({
						url: "/pages/order/Customer?id=" + _this.id
					})
				} else {
					uni.navigateTo({
						url: "/pages/order/AfterSales?id=" + _this.id
					})
				}
			},
			kefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			copyTap(v) {
				uni.setClipboardData({
					data: v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 110upx;
	}

	.status {
		background: $bg-color;
		color: #fff;
		font-size: 40upx;
		line-height: 120upx;
		letter-spacing: 2px;
		text-align: center;
		transform: scaleY(1.2);
	}

	.shop {
		padding: 35upx 20upx 0;


		.list_item {
			display: flex;
			margin-bottom: 20upx;

			image {
				border-radius: 20upx;
				height: 160upx;
				width: 160upx;
			}

			.info {
				color: #666;
				font-size: 28upx;
				line-height: 40upx;
				padding-left: 20upx;
				width: calc(100% - 170upx);

				.title {
					color: #000;
					font-size: 30upx;
				}
			}
		}
	}

	.order {
		border-top: 1px #d3d3d3 solid;
		line-height: 65upx;
		font-size: 32upx;
		padding: 20upx;

		.list_item,
		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				padding-right: 20upx;
			}

			.content {
				justify-content: right;

				text {
					margin-right: 20upx;
				}
			}
		}
	}

	.text_color {
		color: $bg-color;
	}

	.buttons {
		background: #fff;
		line-height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: right;
		width: 100%;
		z-index: 100;

		button {
			margin: 0 20upx;
			letter-spacing: 1px;
		}
	}
</style>